<template>
  <div class="showOnePage">
    <div class="content" v-if="!del">
      <h2 >{{ msg.title }}</h2>
        <p>{{ msg.content }} </p>
        <span>发表人:</span><span>{{ msg.sel }} </span>
        <b v-for="item in msg.check">{{ item  | format}}</b><b>相关信息:</b>
       <div class="operate">
          <button @click.prevent="deleteMsg">删除</button>
          <router-link :to="'/edit/'+ id " tag="button" >编辑</router-link>
       </div>
    </div>
    <div class="show" v-if="del">删除成功</div>
  </div>
</template>
<script>
import axios from 'axios'
  export default{
    data(){
      return{
        id:this.$route.params.id,
        msg:{},
        del:false
      }
    },
    created() {
      this.getmsg()
      
    },
     filters:{
      'format':function(item){
        return item + ","
      }
    },
    methods:{
      getmsg(){
        // this.$http.get('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json')
        axios.get('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json')
        .then(ret => {
          // return ret.json()
          return ret.data
        })
        .then(ret => {
          this.msg=ret
        })
      },
      deleteMsg(){
        // this.$http.delete('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json').then(ret => {
        axios.delete('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json').then(ret => {
          console.log(ret)
          this.del=true
          setTimeout(()=>{
            window.location.href='/'
          },500)
        })
      }
    }
  }
</script>
<style scoped>
  .showOnePage{
    box-sizing:border-box;
    max-width: 1260px;
    width: 100%;
    margin:0 auto;
    background-color: #888;
    padding:10px;
        margin-top:15px;
  }
  h2{
    text-align: center;

  }
  p{
    text-indent: 2em;
  }
  b{
  float: right;
  color:#aaa;
  font-size: 14px;
}
.operate{
  display: flex;
  justify-content: space-between;
}
button{
  display: block;
  padding: 8px;
  background-color: #eee;
  border-radius: 8px;
  margin:10px 0 0 10px;
}
</style>